<?php session_start();
header("Content-Type: text/html; charset=uft8");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Login</title>
	<link type="text/css" href="css/tooltip.css" rel="stylesheet" />
	<link href="css/style.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/themes/base/jquery.ui.all.css">
	<script src="js/jquery-1.7.2.js"></script>
	<script src="js/ui/jquery.ui.core.js"></script>
	<script src="js/ui/jquery.ui.widget.js"></script>
		
	<script type="text/javascript" src="js/ui/ui.formValidator.js"></script>
	<script type="text/javascript" src="js/ui/jquery.ui.position.js"></script>
	<script type="text/javascript" src="js/ui/jquery.ui.tooltip.js"></script>
	<script type="text/javascript">	

		$(function() {			
			var formular = $("#form").formValidator({
				forms: {
					username: {
						rules: {		
							lengthMin: 0,
							lengthMax: 15,
							required: true
						},
						msg: {	
							lengthMin: "At Least 5 Characters .",
							lengthMax: "At Most 15 Characters .",
							required: "UserName"
						}
					},
					password1: {
						rules: {
						   regEx:"[a-zA-Z_][a-zA-Z_0-9]{0,}",
							lengthMin: 0,
							lengthMax: 15,
							required: true
						},
						msg: {
						   regEx:"Wrong Format",
							required: "Please Input Password.",
							lengthMin: "5-15 Characters",
							lengthMax: "5-15 Characters"
						}
					}
					
				},
				validateLive: true,
				errorSummery: "onSubmit",
				disabled: false,
				submitHowTo: "iframe",
				submitUrl: "login.php",
				onShowSuccess: function(event, value){
						if (value == "success") {
                        window.setTimeout(function() {
								formular.fadeOut();
							}, 10);	
                    			window.location.href="index.php";							
						} else {
							//alert(value);
						}
				},			
				customError: function(event, data){ 
					for (var error in data["errors"]){
						if (data.errors[error] == "new") {	
							// we need to check for a context which is not a checkbox so we use to the parent element (which is div.pair)
							var selector = (data.type == "group") ? data.element.first().parent() : data.element;
							// did we set a tooltip?
							if (!data.tooltip) {	
								data.tooltip = selector.tooltip({
									content: function() {
										// use the error message
										return data.msg[error];
									},
									// ui.position settings
									position: {
										my: "left top",
										at: "right top",
										offset: "35 0",
										of: selector
									},
									tooltipClass: "ui-widget-content"
								// no hover effects as we do this on our own
								}).unbind(".tooltip");								
							} else {	
								// as the tooltip is already existent we only need to change the message
								data.tooltip.tooltip("option", "content", function(){ return data.msg[error] });
							}
							// open our tooltip
							data.tooltip.tooltip("open", selector); // para is target (of)
						} else if (data.errors[error] == "corrected") {
							data.tooltip.tooltip("close");			
						}
					}					
				}		
			});				
		});		
	</script>
</head>
<body>
<div id="header" style="margin-left:auto;margin-right:auto; width:150px;"><h1>User Login</h1> </div>
<div id="wrapper" style="margin-left:auto;margin-right:auto;">
	<div id="switcher"></div>
	<br />
	<form id="form" action="ui.formValidator.html" method="post" enctype="multipart/form-data">
		<div id="ui-formular-info" class="info ui-state-highlight ui-corner-all">
		</div>
		<div id="ui-formular-error"></div>
		<fieldset class="ui-widget-content ui-corner-all">
			<legend class="ui-widget-header ui-corner-all">User Login</legend>
						
			<label for="username">User Name<em title="Needed">*</em></label>
			<input id="username" name="username" class="text ui-widget-content ui-corner-all"></input>
						
			<label for="password1">Password <em title="Needed">*</em></label>
			<input name="password1" id="password1" type="password" class="text ui-widget-content ui-corner-all" />
			
	

			<input type="submit" value="OK" class="submit ui-state-default ui-corner-all" />
			<input type="reset" value="RESET" class="submit ui-state-default ui-corner-all" />
		</fieldset>		
	</form>

</div>
</body>
</html>
